<template>
    <footer class="app-footer">
      <div class="footer-content">
        <!-- 品牌信息 -->
        <div class="footer-brand">
          <div class="logo">
            <i class="fas fa-feather"></i>
            <span>社交平台</span>
          </div>
          <p class="slogan">连接世界，分享生活</p>
          <div class="social-links">
            <a href="#" class="social-link">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="social-link">
              <i class="fab fa-wechat"></i>
            </a>
            <a href="#" class="social-link">
              <i class="fab fa-instagram"></i>
            </a>
            <a href="#" class="social-link">
              <i class="fab fa-twitter"></i>
            </a>
          </div>
        </div>
        
        <!-- 快速链接 -->
        <div class="footer-links">
          <h4 class="footer-title">快速链接</h4>
          <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/explore">发现</a></li>
            <li><a href="/notifications">通知</a></li>
            <li><a href="/messages">消息</a></li>
          </ul>
        </div>
        
        <!-- 关于我们 -->
        <div class="footer-links">
          <h4 class="footer-title">关于我们</h4>
          <ul>
            <li><a href="/about">公司简介</a></li>
            <li><a href="/contact">联系方式</a></li>
            <li><a href="/careers">加入我们</a></li>
            <li><a href="/blog">官方博客</a></li>
          </ul>
        </div>
        
        <!-- 帮助中心 -->
        <div class="footer-links">
          <h4 class="footer-title">帮助中心</h4>
          <ul>
            <li><a href="/faq">常见问题</a></li>
            <li><a href="/privacy">隐私政策</a></li>
            <li><a href="/terms">服务条款</a></li>
            <li><a href="/feedback">意见反馈</a></li>
          </ul>
        </div>
      </div>
      
      <!-- 版权信息 -->
      <div class="footer-bottom">
        <p>&copy; 2025 社交平台. 保留所有权利.</p>
        <div class="footer-lang">
          <select>
            <option value="zh">简体中文</option>
            <option value="en">English</option>
            <option value="jp">日本語</option>
          </select>
        </div>
      </div>
    </footer>
  </template>
  
  <script setup>
  // 页脚组件通常不需要复杂逻辑
  </script>
  
  <style scoped>
  .app-footer {
    background-color: #f8f9fa;
    padding: 60px 0;
    margin-top: 60px;
  }
  
  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 0 20px;
  }
  
  .footer-brand .logo {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
  }
  
  .footer-brand .logo i {
    margin-right: 8px;
    color: #007bff;
  }
  
  .footer-brand .slogan {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }
  
  .social-links {
    display: flex;
    gap: 15px;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s ease;
  }
  
  .social-link:hover {
    background-color: #007bff;
    color: #fff;
  }
  
  .footer-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }
  
  .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-links li {
    margin-bottom: 10px;
  }
  
  .footer-links a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .footer-links a:hover {
    color: #007bff;
  }
  
  .footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  
  .footer-bottom p {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
  
  .footer-lang select {
    background-color: #e9ecef;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    color: #666;
    outline: none;
  }
  </style>